<template>
  <view class="maintenance_item">
    <view class="fixedImage">
      <view class="topImage">
        <view v-if="data.maintenanceStatus == 0">
          <image src="https://mkservice.mk-iot.com/subFile/mkApplet/dingdanerror.png"></image>
        </view>
        <view v-if="data.maintenanceStatus==1">
          <image src="https://mkservice.mk-iot.com/subFile/mkApplet/dingdanload.png"></image>
        </view>
        <view v-if="data.maintenanceStatus==2">
          <image src="https://mkservice.mk-iot.com/subFile/mkApplet/dingdansucces.png"></image>
        </view>
        <view v-if="data.maintenanceStatus == 3">
          <image src="https://mkservice.mk-iot.com/subFile/mkApplet/dingdanerror.png"></image>
        </view>
        <view v-if="data.maintenanceStatus==4">
          <image src="https://mkservice.mk-iot.com/subFile/mkApplet/dingdansucces.png"></image>
        </view>

        <view class="topImageUpTitle">
          <view v-if="data.maintenanceStatus == 0">
            <image src="https://mkservice.mk-iot.com/subFile/mkApplet/cuo.png"></image>
            <text>待派发</text>
          </view>
          <view v-if="data.maintenanceStatus==1">
            <image src="https://mkservice.mk-iot.com/subFile/mkApplet/load.png"></image>
            <text>设备正在维修中，请耐心等待</text>
          </view>
          <view v-if="data.maintenanceStatus==2">
            <image src="https://mkservice.mk-iot.com/subFile/mkApplet/dui.png"></image>
            <text>设备已维修完成(待审核)</text>
          </view>
          <view v-if="data.maintenanceStatus == 3">
            <image src="https://mkservice.mk-iot.com/subFile/mkApplet/cuo.png"></image>
            <text>设备已维修完成(已拒绝)</text>
          </view>
          <view v-if="data.maintenanceStatus==4">
            <image src="https://mkservice.mk-iot.com/subFile/mkApplet/dui.png"></image>
            <text>设备已维修完成(已同意)</text>
          </view>
        </view>
      </view>
    </view>
    <view class="weixiuStatus" v-if="list3.length>0">
      <uni-section title="维修状态" type="line" padding>
        <uni-steps :options="list3" active-color="#007AFF" :active="list3.length-1" direction="column" />
      </uni-section>
    </view>
    <view class="orderView">
      <view class="apply-table">
        <view class="title-img"></view>
        <view class='apply-title'>报修详情</view>
        <view class="apply-item">
          <view>
            <!-- <text class="apply-item-title">设备编码：</text>
            <text selectable="true" class="apply-item-data">{{data.equipmentNo}}</text> -->
            <text class="apply-item-title">设备分类：</text>
            <text selectable="true" class="apply-item-data" v-for="(item,index) in eqClassification"
              v-if="item.value==data.equipmentClassification">{{item.text}}</text>
          </view>
          <view>
            <text class="apply-item-title">故障级别：</text>
            <text selectable="true" class="apply-item-data">{{data.urgency ==0?'普通维修':'紧急维修'}}</text>
          </view>
          <view>
            <text class="apply-item-title">处理状态：</text>
            <text selectable="true" class="apply-item-data" v-if="data.maintenanceStatus==0">派发中</text>
            <text selectable="true" class="apply-item-data" v-if="data.maintenanceStatus==1">维修中</text>
            <text selectable="true" class="apply-item-data" v-if="data.maintenanceStatus==2">维修完成(待审核)</text>
            <text selectable="true" class="apply-item-data" v-if="data.maintenanceStatus==3">维修完成(已拒绝)</text>
            <text selectable="true" class="apply-item-data" v-if="data.maintenanceStatus==4">维修完成(已同意)</text>
          </view>
          <view>
            <text class="apply-item-title">报修日期：</text>
            <text selectable="true" class="apply-item-data">{{data.warrantyDate}}</text>
          </view>
          <view>
            <text class="apply-item-title">报修地址：</text>
            <text selectable="true" class="apply-item-data"
              style="color: rgb(0, 81, 255);">{{data.warrantyAddress}}</text>
          </view>
          <view>
            <text class="apply-item-title">客户手机号：</text>
            <text selectable="true" style="color: rgb(0, 0, 0);" class="apply-item-data">{{data.customerNumber}}</text>
          </view>
          <view>
            <text class="apply-item-title">故障描述：</text>
            <text selectable="true" class="apply-item-data">{{data.taskDescription}}</text>
          </view>
          <view>
            <text class="apply-item-title">文件上传：</text>
            <view class='right' :style='maintenanceImgList.length>3?"height:200px":""'>
              <view class="feedback-image-item" v-for="(item,index) in maintenanceImgList" v-key="index">
                <view class="image-box">
                  <image :src="item.url" mode="aspectFill" @tap="previewMaintenanceImg(index,item.url)"></image>
                </view>
              </view>
              <view class="feedback-image-item" v-for="(item,index) in maintenanceVideoList" v-key="index">
                <view class="image-box" @tap="videoshow(item.url)">
                  <video :src="item.url" class="video"></video>
                </view>
              </view>
            </view>
            <!-- <text selectable="true" class="apply-item-data">{{data.taskDescription}}</text> -->
          </view>
        </view>
      </view>
      <view class="apply-table" v-if="maintainerId==null||roleIsAdmin==true">
        <view class="title-img"></view>
        <view class='apply-title'>维修人</view>
        <view class="apply-item">
          <view>
            <text class="apply-item-title">昵称：</text>
            <text selectable="true"
              class="apply-item-data">{{(data.maintainerName == null||data.maintenanceStatus==0)?'':data.maintainerName}}</text>
          </view>
          <view>
            <text class="apply-item-title">联系电话：</text>
            <text selectable="true" class="apply-item-data"
              style="color: rgb(0, 81, 255);">{{(data.maintainerNumber==null ||data.maintenanceStatus==0)?'':data.maintainerNumber}}
            </text>
          </view>
          <view>
            <text class="apply-item-title">维修开始时间：</text>
            <text selectable="true" class="apply-item-data"
              style="color: rgb(0, 81, 255);">{{data.startTime==null?'':data.startTime}}</text>
          </view>
          <view>
            <text class="apply-item-title">维修结束时间：</text>
            <text selectable="true" class="apply-item-data"
              style="color: rgb(0, 81, 255);">{{data.endTime==null?'':data.endTime}}</text>
          </view>
        </view>
      </view>

      <view class="apply-table" v-if="maintainerId!=null || roleIsAdmin==true">
        <view class="title-img"></view>
        <view class='apply-title'>报修人</view>
        <view class="apply-item">
          <view>
            <text class="apply-item-title">昵称：</text>
            <text selectable="true" class="apply-item-data">{{data.user.nickName == null?'':data.user.nickName}}</text>
          </view>
          <view>
            <text class="apply-item-title">联系电话：</text>
            <text selectable="true" class="apply-item-data"
              style="color: rgb(0, 81, 255);">{{data.user.phonenumber==null?'':data.user.phonenumber}}
            </text>
          </view>
        </view>
      </view>

      <view class="apply-table" v-if="data.maintainerEvaluate !==null">
        <view class="title-img"></view>
        <view class='apply-title'>评价</view>
        <view class="apply-item">
          <view class="star">
            <text class="apply-item-title">评分：</text>
            <view v-for="(val, index) in 5">
              <image class="img"
                :src="star > index ? 'https://mkservice.mk-iot.com/subFile/mkApplet/star.png' : 'https://mkservice.mk-iot.com/subFile/mkApplet/no-star.png'"
                mode="aspectFill">
              </image>
            </view>
            <text class='rtxt'>{{ starName[star - 1] }}</text>
          </view>
          <view>
            <text class="apply-item-title">评语：</text>
            <text selectable="true" class="apply-item-data"
              style="color: rgb(0, 81, 255);">{{data.remark == null?'':data.remark}}</text>
          </view>
        </view>
      </view>

      <view class="apply-table" v-if="data.repairDescription !==null&&data.repairDescription !==''">
        <view class="title-img"></view>
        <view class='apply-title'>维修完成后详细</view>
        <view class="apply-item">
          <view>
            <text class="apply-item-title">维修完成描述：</text>
            <text selectable="true" class="apply-item-data">{{data.repairDescription}}</text>
          </view>
          <view>
            <text class="apply-item-title">维修完成上传图：</text>
            <view class='right' :style='repairImgList.length>3?"height:200px":""'>
              <view class="feedback-image-item" v-for="(item,index) in repairImgList" v-key="index">
                <view class="image-box">
                  <image :src="item.url" mode="aspectFill" @tap="previewImg(index,item.url)"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="videoplay">
        <video controls id="myvideo" :src="videoUrl" @fullscreenchange="screenChange"></video>
      </view>
      <!--只有报修人和管理员可以修改，并且是在未派发之前-->
      <view v-if='this.$auth.hasRole("admin")'>
        <button class="updateBtn"
          @tap="updateOrder(data.maintenanceCode,(data.maintenanceStatus == 0)?0:1)">{{(data.maintenanceStatus == 0)?"修改报修":""}}</button>
      </view>

      <view v-else>
        <button class="updateBtn"
          @tap="updateOrder(data.maintenanceCode,(data.maintenanceStatus == 0 && data.warrantyPersonId==userid)?0:1)">{{(data.maintenanceStatus == 0 && data.warrantyPersonId==userid)?"修改报修":""}}</button>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    getTask,
    delTask,
    selectAllByMaintenanCode,
    queryRepairImgList,
    querymaintenceImgList,
    querymaintenceVideoList
  } from "@/api/system/task/task.js"
  import config from '@/config'
  export default {
    data() {
      return {
        baseUrl: config.baseUrl,
        userid: null,
        star: 0, //课程评价，默认5星
        starName: ['极差', '一般般', '良好', '非常好', '非常棒'],
        data: {},
        mcode: '',
        list3: [],
        repairImgList: [],
        maintenanceImgList: [],
        maintenanceVideoList: [],
        eqClassification: [],
        queryImgList: {
          pageNum: 1,
          pageSize: 5,
          repairImgCode: ''
        },
        querymaintenceImg: {
          pageNum: 1,
          pageSize: 5,
          maintenanceImgCode: ''
        },
        maintainerId: null,
        roleIsAdmin: this.$auth.hasRole("admin"),
        videoplay: false, //通过是否播放控制播放盒子显示隐藏
        videoUrl: "", //全屏播放视频的URL
      };
    },
    //页面创建时调用数据刷新
    created() {
      uni.$on("toItem", () => {
        //先清空图片数组，返回查询图片上传，加延时更新图片
        this.maintenanceImgList = []
        this.maintenanceVideoList = []
        let timer = setTimeout(() => {
          this.queryMyToList(this.mcode)
          this.querymaintenceImgList(this.mcode)
          clearTimeout(timer);
        }, 500);
      });
      this.getDicts("equipment_classification").then(response => {
        this.eqClassification = response.data.map(x => ({
          value: parseInt(x.dictValue),
          text: x.dictLabel,
        }))
      });
    },
    //防止页面重复调用
    onUnload() {
      // 移除监听事件
      uni.$off("toItem");
    },
    // 这里myvideo 是你上面命名的id    
    onReady: function() {
      this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象  必传
    },
    onLoad(option) {
      this.mcode = option.mcode
      this.querystateLsit(option.mcode)
      this.queryMyToList(option.mcode)
      this.queryRepairImgList(option.mcode)
      this.querymaintenceImgList(option.mcode)
      this.maintainerId = option.maintainerId
      this.userid = option.userid
    },
    methods: {
      //进入全屏
      screenChange(e) {
        let fullScreen = e.detail.fullScreen; //值true为进入全屏，false为退出全屏
        if (!fullScreen) {
          //退出全屏
          this.videoplay = false; // 隐藏播放盒子
        }
      },
      //点击视频播放是跳转全屏
      videoshow(e) {
        //e 是通过点击事件拿到的视屏地址
        this.videoUrl = e;
        this.videoContext.requestFullScreen({
          direction: 90
        }); //direction: 90  这个是控制全屏的时候视屏旋转多少度 
        this.videoContext.play();
        this.videoplay = true; // 显示播放盒子
      },
      //查询报修上传的图片
      querymaintenceImgList(mcode) {
        this.querymaintenceImg.maintenanceImgCode = mcode
        querymaintenceImgList(this.querymaintenceImg).then(response => {
          if (response.code === 200) {
            response.rows.forEach((item, index) => {
              //处理小程序多选状况
              this.maintenanceImgList.push({
                url: this.baseUrl + item.maintenanceImgUrl,
                id: item.id
              })
            })
          }
        })
        querymaintenceVideoList(this.querymaintenceImg).then(response => {
          if (response.code === 200) {
            response.rows.forEach((item, index) => {
              //处理小程序多选状况
              this.maintenanceVideoList.push({
                url: this.baseUrl + item.maintenanceImgUrl,
                id: item.id
              })
            })
          }
        })
      },

      //查询评价的图片
      queryRepairImgList(mcode) {
        this.queryImgList.repairImgCode = mcode
        queryRepairImgList(this.queryImgList).then(response => {
          if (response.code === 200) {
            response.rows.forEach((item, index) => {
              //处理小程序多选状况
              this.repairImgList.push({
                url: this.baseUrl + item.repairImgUrl,
                id: item.id
              })
            })
          }
        })
      },
      //浏览维修图片
      previewMaintenanceImg(index, url) {
        const thant = this
        //每次点击浏览先清空数组
        thant.imglist = []
        //循环把路径丢到图片列表里面
        thant.maintenanceImgList.forEach((item, index) => {
          thant.imglist.push(item.url)
        })
        uni.previewImage({
          urls: thant.imglist,
          current: url,
          // 下面我这边做的都是默认的选择
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              thant.$modal.msgSuccess(data)
            },
            fail: function(err) {
              thant.$modal.msgError(err)
            }
          }
        });
      },
      //浏览评价图片
      previewImg(index, url) {
        const thant=this
        //每次点击浏览先清空数组
        thant.imglist = []
        //循环把路径丢到图片列表里面
        thant.repairImgList.forEach((item, index) => {
          thant.imglist.push(item.url)
        })
        uni.previewImage({
          urls: thant.imglist,
          current: url,
          // 下面我这边做的都是默认的选择
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
             thant.$modal.msgSuccess(data)
            },
            fail: function(err) {
            thant.$modal.msgError(err)
            }
          }
        });
      },
      //查询报修的详细数据
      queryMyToList(maintenanceCode) {
        // 打开遮罩层
        this.$modal.loading("数据加载中...");
        getTask(maintenanceCode).then(response => {
          if (response.code === 200) {
            // 关闭遮罩层
            this.$modal.closeLoading();
            this.data = response.data
            this.star = parseInt(this.data.maintainerEvaluate)
          }
        })
      },
      //根据工单编号查询工单状态列表
      querystateLsit(maintenanceCode) {
        const query = {
          maintenanceCode: maintenanceCode
        }
        selectAllByMaintenanCode(query).then(response => {
          //查询维修状态，由名称、时间、描述组成
          if (response.code == 200 && response.rows != null) {
            this.list3 = response.rows.map(x => ({
              title: x.state,
              desc: x.datetime + '\n' + (x.descs == null ? '' : x.descs),
            }))
          }
        })
      },
      //修改报修
      updateOrder(maintenanceCode, maintenanceStatus) {
        this.$tab.navigateTo('../maintenance/maintenance_edit?maintenanceCode=' +
          maintenanceCode + "&maintenanceStatus=" + maintenanceStatus)
      },
    }
  }
</script>

<style lang="scss">
  .maintenance_item {
    .fixedImage {
      position: sticky;
      top: 0;
      width: 100%;
      z-index: -1;

      .topImage {
        .topImageUpTitle {
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          position: fixed;
          top: 120rpx;
          left: 0;
          right: 0;
          margin: 0 auto;
        }

        .topImageUpTitle image {
          width: 80rpx;
          height: 80rpx;
          vertical-align: middle;
        }

        .topImageUpTitle text {
          color: #fff;
          font-size: 28rpx;
          font-weight: bold;
        }
      }
    }


    .topImage image {
      width: 100%;
    }

    .weixiuStatus {
      margin-top: -120px;
      width: 90%;
      margin: 10px auto;
    }

    .orderView {
      height: 610rpx;

      .apply-table {
        z-index: 1;
        width: 90%;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
        position: relative;
        margin: 10px auto;

        .apply-title {
          font-weight: bolder;
          font-size: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
        }

        .title-img {
          width: 10rpx;
          height: 30rpx;
          background-color: rgb(26, 147, 247);
          vertical-align: middle;
          margin-right: 10rpx;
          position: absolute;
          left: 0rpx;
        }

        .apply-item {
          margin-top: 10rpx;

          .apply-item-title {
            font-weight: 500;
            font-size: 28rpx;
          }

          .apply-item-data {
            font-size: 28rpx;
            color: rgb(102, 100, 100);
          }
        }
      }

      .updateBtn {
        background-color: rgb(9, 112, 247);
        color: #fff;
        width: 80%;
        z-index: 999;
      }

      .updateBtn:active {
        background-color: #fff;
        color: rgb(9, 112, 247);
        border: 1px solid rgb(9, 112, 247);
        width: 80%;
      }
    }
  }

  .star {
    display: flex;
    justify-content: left;
  }

  .star image {
    width: 43rpx;
    height: 43rpx;
  }

  .star .rtxt {
    margin-left: 10rpx;
  }

  .right {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx;

    .feedback-image-item {
      position: relative;
      width: 33.33%;
      height: 0;
      padding-top: 33.33%;
      box-sizing: border-box;

      .close-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        background-color: #ff5a5f;
        z-index: 2;
      }

      .image-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        left: 10rpx;
        bottom: 10rpx;
        border: 1px #c7c7c7 solid;
        border-radius: 10rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>